
import React,{Fragment} from 'react'
import { Menu, Icon,Card,Alert,Button,Form,Input,Select,Message,Modal } from 'antd';
import style from "./Index.module.css"
import Store from "./Store"
import {CreateOrUpdate, Delete} from "../../../../api/work/menu/MenuApi";
import {observer} from 'mobx-react'

@observer
class Index extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    handleClick = e => {
        Store.record = Store.keyMap[e.key];
        Store.type = "";
    };

    componentDidMount() {
        Store.fetchRecords()
    }

    handleSubmit = () => {
        this.props.form.validateFields((err,formData) => {
            if (!err){
                formData["pid"] = Store.record.pid;
                if (Store.record.id){
                    formData["id"] = Store.record.id
                }
                CreateOrUpdate(formData).then(response => {
                    if (response.data.code === 200){
                        Store.fetchRecords();
                        Message.success(response.data.msg);
                    }
                })
            }
        })
    };

    handleDelete = (id) => {
        Modal.confirm({
            title: '该菜单及其子项都会被删除，谨慎操作!!!',
            onOk: () => {
                Delete({id:id}).then(response => {
                    if (response.data.code === 200){
                        Store.fetchRecords();
                        Store.record = {};
                        Message.success(response.data.msg);
                    }
                })
            }
        })

    };

    makeMenu = (menu) => {
        return (menu.children) ? this.makeSubMenu(menu) : this.makeItem(menu)
    };

    makeItem = (menu) => {
        return (
            <Menu.Item key={menu.id}>
                {menu.icon && <Icon type={menu.icon}/>}
                <span>{menu.title}</span>
                <span style={{marginLeft:5}}>
                 <Icon type="plus-square" theme="twoTone" onClick={e => {Store.record={pid:menu.id};Store.type = "plus";e.stopPropagation()}}/>
                 <Icon type="edit" theme="twoTone" onClick={e => {Store.record=menu;Store.type = "edit";e.stopPropagation()}}/>
                 <Icon type="delete" theme="twoTone" onClick={e => {this.handleDelete(menu.id);e.stopPropagation()}}/>
                 </span>
            </Menu.Item>
        )
    };

    makeSubMenu = (subMenu) => {
        return (
            <Menu.SubMenu
                key={subMenu.id}
                title={
                    <span>
                        <Icon type={subMenu.icon}/>
                        <span>{subMenu.title}</span>
                        <span style={{marginLeft:5}}>
                            <Icon type="plus-square" theme="twoTone" onClick={e => {Store.record={pid:subMenu.id};Store.type = "plus";e.stopPropagation()}}/>
                            <Icon type="edit" theme="twoTone" onClick={e => {Store.record=subMenu;Store.type = "edit";e.stopPropagation()}}/>
                            <Icon type="delete" theme="twoTone" onClick={e => {this.handleDelete(subMenu.id);e.stopPropagation()}}/>
                        </span>
                    </span>}
            >
                {subMenu.children.map(menu => this.makeMenu(menu))}
            </Menu.SubMenu>
        )
    };

    render() {

        const {getFieldDecorator} = this.props.form;
        const { Option } = Select;
        return (
            <Card>

                <Button style={{marginBottom:"10px"}} type="primary" icon="plus" onClick={() => {Store.record = {pid:0};Store.type = "top"}}>创建顶级菜单</Button>

                <Alert closable showIcon type={"info"} message={"小提示"}
                       style={{width: 750,marginBottom:"10px", color: '#31708f !important'}}
                       description={"配置超级管理员和系统管理员特有的菜单"}
                />

                <div className={style.container}>
                    <div className={style.left}>
                        <Menu
                            onClick={this.handleClick}
                            style={{border: 'none',width: "300px"}}
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            mode="inline"
                        >
                            {Store.records.map(menu => this.makeMenu(menu))}
                        </Menu>
                    </div>
                    <div className={style.right}>
                        <Form labelCol={{span: 2}} wrapperCol={{span: 14}}>
                            <Form.Item>
                                当前操作：{Store.getNodeDes()}
                            </Form.Item>
                            <Form.Item label="路由">
                                {getFieldDecorator('route', {initialValue: Store.record.route,rules:[{required:true,message:"路由不能为空"}]})(
                                    <Input placeholder="请输入路由"/>
                                )}
                            </Form.Item>
                            <Form.Item label="标题">
                                {getFieldDecorator('title', {initialValue: Store.record.title,rules:[{required:true,message:"标题不能为空"}]})(
                                    <Input placeholder="请输入标题"/>
                                )}
                            </Form.Item>
                            <Form.Item label="图标">
                                {getFieldDecorator('icon', {initialValue: Store.record.icon})(
                                    <Input placeholder="请输入图标"/>
                                )}
                            </Form.Item>
                            <Form.Item label="排序">
                                {getFieldDecorator('sort', {initialValue: Store.record.sort ? Store.record.sort : 1,rules:[{required:true,message:"排序不能为空"}]})(
                                    <Input placeholder="请输入排序"/>
                                )}
                            </Form.Item>
                            <Form.Item label="角色">
                                {getFieldDecorator('role', {initialValue: Store.record.role,rules:[{required:true,message:"角色不能为空"}]})(
                                    <Select
                                        showSearch
                                        placeholder="请选择角色"
                                    >
                                        <Option value="1">root</Option>
                                        <Option value="2">admin</Option>
                                    </Select>,
                                )}
                            </Form.Item>
                            <Form.Item wrapperCol={{offset:2,span:14}}>
                                <Button block type="primary" onClick={this.handleSubmit}>提交</Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </Card>
        );
    }
}

export default Form.create()(Index);
